<template>
  <div>
    <div class="box-card">
      <div>
        <div>
          <img :src="'http://47.106.168.239:8098/api/getBackground/'+2" style="border-radius: 4px;width: 300px;height:150px">
        </div>
        <div style="text-align: center;margin-top: -13%">
          <img :src="'http://47.106.168.239:8098/api/getAvatar/'+2" class="circleImg">
        </div>
        <div style="text-align: center;">
          <span style="font-weight: bold;font-size: 20px;">{{authorInfo.nickname}}</span>
        </div>
        <div style="text-align: center;margin: 4%;">
          <span style="font-weight: normal;font-size: 13px;">{{authorInfo.motto}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      authorInfo: [],
      avatar: '',
      background: '',
    }
  },
  methods: {
    getInfo () {
      var that = this;
      axios({ 
        method: "GET",
        url: '/authorInfo/getInfo/' + '2',
        }).then(function (res) {
        that.authorInfo = res.data.data[0];    
        });
    }
  },
  created () {
    this.getInfo()
  }
}
</script>

<style lang="less" scoped>
.box-card{
  width: 100%;
  background-color: white;
  border-radius: 4px;
  padding-bottom: 1px;
}
.author-avatar{
  text-align: center;
}
.circleImg{
  border-radius: 50px;
  width:70px;
  height:70px;
  border: 1px solid #eee;
  padding: 3px;
  background-color: #fff;
}
</style>
